<template>
	<view class="unitvimg-box">
		<view class="loading-box" v-if="loadAnimal && status != 1">
			<image mode="widthFix" class="loading" src="@/static/load.png"></image>
		</view>
		<image :mode="mode" class="original" :src="imgUrl" @error="error" @load="load" v-show="!loadAnimal || status == 1"></image>
	</view>
</template>

<script>
	export default {
		name: "unitvImage",
		props: {
			loadAnimal: {
				type: Boolean,
				default: true
			},
			mode: {
				type: String,
				default: 'scaleToFill'
			},
			src: {
				type: String,
				required: true
			}
		},
		updated() {
		},
		created() {
		},
		mounted() {
		},
		computed: {
			imgUrl() {
				if(this.src.startsWith("http")) {
					return this.src
				} else {
					return this.host + this.src
				}
			}
		},
		data() {
			return {
				status: 0,	// 0初始化，1成功，2失败
			}
		},
		methods: {
			error() {
				this.status = 2
			},
			load() {
				this.status = 1
			},
		}
	}
</script>

<style lang="scss" scoped>
	.unitvimg-box {
		height: 100%;
		position: relative;
		
		.loading-box {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #c2c2c2;
			
			.loading {
				width: 60%;
				filter: grayscale(100%);
			}
		}
		
		.original {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}
	}
</style>
